<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       *{
        margin:0;
        padding:0;
       }
       body{
        height:3000px;
       }
       #box{
        height:300px;
        width:200px;
        background: #ccc;
        margin:1000px 50px;
       }
       img{
        height:300px;
        width:200px;
       }
       /* 隐藏src无值的裂图 */
       img[src=""]{
         display: none;
       }
    </style>
</head>
<body>
    <!-- 1.占位盒子，给图片占位 -->
    <div id="box">
        <img src="" data-src="./瀑布流/images/1.jpg"  alt="">
    </div>

    <script>
         let img=document.querySelector("img");
         function showimg(){
            // console.log("111");
            let dataSrc=img.getAttribute("data-src");
            let newimg=new Image;
            newimg.src=dataSrc;
            newimg.onload=function(){
               img.src=dataSrc;
               img.removeAttribute("data-src");
               newimg=null;
               img.flag=true;
            }
         }
        let ob=new IntersectionObserver((changes)=>{
            // console.log(changes);
            if(changes[0].isIntersecting){//加载图片
               if(img.flag){
                  ob.unobserve(box);//取消监听--还会外触发几次
                  return;
               }
               showimg();
            }
        },{
           threshold:[1]
        })

        ob.observe(box);
    </script>
</body>
</html>